<template lang="html">
  <div class="nav-icons-components">
    <!-- 预览区 -->
    <div class="design-preview-controller" >
      <div class="nav-icons-con">
        <div class="container">
          <div class="icons">
            <div v-for="item in formData.iconsList" :key="item" class="icons_list">
              <div class="icons_cell">
                <img class="icon_image" :src="item.nav_image">
                <span class="nav_title">{{ item.nav_title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边编辑区 -->
    <div v-if="isShowEdit" class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">图文导航</div>
        <div class="incons_list_con">
          <div class="radio_types_incon">
            <el-radio v-model="formData.iconsType" label="0">图文导航</el-radio>
            <el-radio v-model="formData.iconsType" label="1">文字导航</el-radio>
          </div>
          <div class="detail_icons_content_list_ul">
            <!-- v-for="(item,index) in formData.iconsList" :key="" -->
            <div class="detail_icons_content_list_li">
              <div class="icons_list_li">
                <div class="icon_li_sub_con">
                  <span class="span_15">导航1</span>
                  <span class="span_13">删除</span>
                </div>
                <div class="details_icons_images_con">
                  <div class="icons_list_images">
                    <img class="icons_list_detail">
                    <div class="icons_list_choose">
                      更改图片
                    </div>
                  </div>
                  <div class="icon_li_sub_detail">
                    <div class="icon_li_sub_detail_content title-form-placehoder">
                      <div class="title-form-placehoder-title-text">
                        <span>文本</span>
                      </div>
                      <div class="title-form-placehoder-title-input">
                        <el-input
                          v-model="formData.presetContent"
                          type="textarea"
                          placeholder="描述"
                          maxlength="8"
                          show-word-limit
                        />
                      </div>
                    </div>
                    <div class="icon_li_sub_link_con">
                      <span class="span_13">链接</span>
                      <span class="span_13 margin-color">选择跳转到的页面</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn_icons_list">
            <div class="btn_icons_list_con">
              <span class="span_13 font-color">添加导航</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import index from './index.js'

export default index
</script>

<style lang="scss" scoped>
</style>
